<template>
  <div class="grid">
    <ul class="ul_grid">
      <li v-for="(item,index) in products" :key="index">
        <a href="javascript:void(0)" class="">
          <div class="center-block state_c "><img :src="item.imagePath" /></div>
          <h3 :title="item.title">{{item.title}}</h3>
          <p>￥<span>{{item.price}}</span></p>
        </a>
      </li>
    </ul>
  </div>
</template>
<script>
export default {
  name: "grid",
  props: ["products"],
  data() {
    return {

    }
  },
}
</script>
<style lang="scss" scoped>
.grid {
  width: 100%;
}

.ul_grid {
  list-style: none;
}

.ul_grid li {
  width: 49.9%;
  /* // height: 150px; */
  background: #fff;
  float: left;
  border: 2px solid #fff;
  text-align: center;
  box-sizing: border-box;
  p {
    font-size: 12px;
    color: red;
    padding: 0px;
    margin: 0px;
    text-align: left;
    span {
      font-size: 16px;
      font-weight: bold;
    }
  }
}

.ul_grid li h3 {
  //   text-align: left;
  margin-top: 1px;
  font-size: 14px;
  height: 25px;
  line-height: 25px;
  overflow: hidden;
  color: #555;
  padding: 0px;
  margin: 0px;
}

.center-block {
  display: block;
  margin-right: auto;
  margin-left: auto;
}

.state_c {
  /* // width: calc(100% / 3 - 14px); */
  height: 110px;
  /* // background: url("../assets/images/123.jpg") no-repeat center; */
}

.state_c img {
  width: 100%;
  height: 110px;
  /* // background: url("../assets/images/123.jpg") no-repeat center; */
}
</style>